import CountDownButton from '@/components/CountDownButton';
import {
  getCodeForUpdatePWD,
  getCodeForUpdatePayPWD,
  modifyPWD,
  modifyPayPWD,
} from '@/services/account-center';
import { useModel } from '@umijs/max';
import { Button, Col, Form, Input, Modal, Row } from 'antd';
import { useState } from 'react';

const PasswordManager = () => {
  const [openModal, setOpenModal] = useState(false);
  const { initialState } = useModel('@@initialState');
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [type, setType] = useState('login');

  return (
    <div className="bg-white h-full p-6 flex flex-col gap-4">
      <div className="flex items-center gap-4">
        <div>登录密码：</div>
        <div>已设置</div>
        <Button
          onClick={() => {
            setType('login');
            setOpenModal(true);
          }}
        >
          修改登录密码
        </Button>
      </div>
      <div className="flex items-center gap-4">
        <div>支付密码：</div>
        <div>
          {initialState?.currentUser.hasPayPassword ? '已设置' : '未设置'}
        </div>
        <Button
          onClick={() => {
            setType('pay');
            setOpenModal(true);
          }}
        >
          {initialState?.currentUser.hasPayPassword ? '修改' : '设置'}
        </Button>
      </div>
      <div className="flex items-center gap-4">
        <div>密保问题：</div>
        <div>未设置</div>
        <Button>设置</Button>
      </div>
      <Modal
        open={openModal}
        title={type === 'login' ? '修改登录密码' : '修改支付密码'}
        onCancel={() => {
          setOpenModal(false);
        }}
        okButtonProps={{
          loading,
        }}
        destroyOnClose
        maskClosable={false}
        onOk={async () => {
          await form.validateFields();
          setLoading(true);
          (type === 'login' ? modifyPWD : modifyPayPWD)(form.getFieldsValue())
            .then((res) => {
              console.log(res);
            })
            .finally(() => {
              setLoading(false);
            });
        }}
      >
        <div>
          <div className="ml-[44px] my-6">
            手机号：{initialState?.currentUser.mobile}
          </div>
          <Form labelCol={{ span: 5 }} form={form}>
            <Form.Item label="验证码" required>
              <Row gutter={12}>
                <Col span={13}>
                  <Form.Item
                    noStyle
                    name={'checkCode'}
                    rules={[{ required: true, message: '请输入验证码' }]}
                  >
                    <Input placeholder="请输入验证码" />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <CountDownButton
                    getCaptchaFn={() => {
                      return (
                        type === 'login'
                          ? getCodeForUpdatePWD
                          : getCodeForUpdatePayPWD
                      )({ mobile: initialState?.currentUser.mobile });
                    }}
                  />
                </Col>
              </Row>
            </Form.Item>
            <Form.Item
              label="输入新密码"
              rules={[{ required: true, message: '请输入新密码' }]}
              wrapperCol={{ span: 10 }}
              name={'password'}
            >
              <Input placeholder="请输入新密码" />
            </Form.Item>
            <Form.Item
              label="确认新密码"
              rules={[{ required: true, message: '请确认新密码' }]}
              wrapperCol={{ span: 10 }}
              name={'repeatPassword'}
            >
              <Input placeholder="请再次输入新密码" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  );
};

export default PasswordManager;
